<template>
    <div>
        <div class="loan_nav">
			<ul>
				<li><a href="javascript:history.go(-1)"><i class="iconfont">&#xe61e;</i></a></li>
				<li><p>商业贷款计算器</p></li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">
			
		</div>
		<div>
			<swiper :list="imgList" :show-dots="false" loop auto :aspect-ratio="0.3" dots-position="center" dots-class="custom-bottom"></swiper>
		</div>
        <div class="business_ipt">
            <!-- <ul>
                <li>
                    <select>
                        <option value ="volvo">等额本息</option>
                        <option value ="saab">等额本金</option>
                    </select>
                </li>
                <li>
                    <i class="iconfont">&#xe710;</i>
                </li>
            </ul> -->
             <ul>
                <li>
                    <input v-model="year" type="tel" placeholder="请填写贷款年限">
                </li>
                <li>
                    <p>年</p>
                </li>
            </ul>
            <ul>
                <li>
                    <input v-model="money" type="tel" placeholder="请填写贷款金额">
                </li>
                <li>
                    <p>万元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <input v-model="ratio" type="tel" placeholder="商业贷款月息">
                </li>
                <li>
                    <p>厘</p>
                </li>
            </ul>
            <ul style="position: relative;height: 40px;background: #fff;">
                <li style="position: absolute;
				z-index: 2;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				background: rgba(0, 0, 0, 0) !important; 
				height: 40px;"
				>
                    <select v-model="showTable"> 
                        <option :value="true">显示还款明细</option>
                        <option :value="false">不显示还款明细</option>
                    </select>
                </li>
                <li style="position:absolute;right:0;border-bottom:none;height:40px">
                    <i class="iconfont">&#xe710;</i>
                </li>
            </ul>
        </div>
        <div class="business_btn">
            <ul>
                <li>
                    <input @click="showResult=true" type="button" class="Calculation" value="开始计算">
                </li>
                <li>
                    <input @click="reset" type="button" class="Reset" value="重置">
                </li>
            </ul>
        </div>
        <div class="business_title">
            <p>计算结果:</p>
        </div>
        <div class="business_result">
             <ul>
                 <li>
                     <p>
                         月均还款
                     </p>
                 </li>
                <li>
                    <input :value="showResult ? b : 0" type="text" placeholder="显示月均还款" readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         支付利息
                     </p>
                </li>
                <li>
                    <input :value="showResult ? y : 0" type="text" placeholder="显示支付利息" readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         还款总额
                     </p>
                </li>
                <li>
                    <input :value="showResult ? t : 0" type="text" placeholder="显示还款总额" readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
        </div>
		<x-table v-show="n!==0&&showTable&&showResult">
			<thead style="background-color: #F7F7F7;">
				<tr>
					<th>期/月</th>
					<th>偿还利息</th>
					<th>偿还本金</th>
					<th>档期月供</th>
					<th>剩余本金</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="j in n">
					<td>{{j}}</td>
					<td>{{mInterest(j)}}</td>
					<td>{{principal(j)}}</td>
					<td>{{b}}</td>
					<td>{{surplus(j)}}</td>
				</tr>
			</tbody>
		</x-table>
    </div>
</template>
<script>
import { XTable } from 'vux'
export default {
	components: {
		XTable
	},
	data() {
		return {
			year: null,
			money: null,
			ratio: null,
			showResult: false,
			showTable: true,

			imgList: []
		}
	},
	computed: {
		n() {
			const r = Number((this.year * 12).toFixed(0))
			return isNaN(r) ? 0 : r
		},
		a() {
			return this.money * 10000
		},
		i() {
			return this.ratio * 0.001
		},
		b() {
			const { a, i, n } = this
			const r = (a * i * Math.pow(1 + i, n) / (Math.pow(1 + i, n) - 1)).toFixed(2)
			return isNaN(r) ? 0 : Number(r)
		},
		t() {
			const { n, b } = this
			const r = (n * b).toFixed(2)
			return isNaN(r) ? 0 : Number(r)
		},
		y() {
			const { t, a } = this
			let r = Number((t - a).toFixed(2))
			r = isNaN(r) ? 0 : r
			return r < 0 ? 0 : r
		}
	},
	created() {
		this.queryImg()
	},
	methods: {
		reset() {
			this.year = this.money = this.ratio = null
			this.showResult = false
		},
		mInterest(j) {
			const { a, i, b } = this
			return ((a * i - b) * Math.pow(1 + i, j -1) + b).toFixed(2)
		},
		principal(j) {
			return (this.b - Number(this.mInterest(j))).toFixed(2)
		},
		surplus(j) {
			let principal = 0
			for(let i=1; i<=j; i++) {
				principal += Number(this.principal(i))
			}
			return (this.a - principal).toFixed(2)
		},

		queryImg() {
			this.$http.get('/app/index/carousel', {
				params: { page: 'business' }
			}).then(json => {
				const { code, carousel } = json
				if (code === 0) {
					carousel.forEach(n => {
						this.imgList.push({
							url: n.url,
							img: n.imgPath
						})
					})
				}
			})
		}
	}
}
</script>

